<template>
  <view class="content">
    <u-navbar :placeholder='true' title="添加用户" leftIcon="arrow-leftward"
              @leftClick="leftClick('/pages/mine/setting/person/index')">
    </u-navbar>
    <view class="main">
      <view style="background-color: #fff;">
        <view class="form">
          <view class="form-l">
            選擇等級
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <picker @change="bindPickerChange" :value="index" :range="array" range-key="charactername">
              <view class="picker">
                <!-- <view class="uni-input">{{array[index]}}</view> -->
                <view class="uni-input">{{ getcharacterByid(topform.character_id) }}</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            登錄名
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="topform.username" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            密碼
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="topform.password" class="input-item" type="password">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            郵箱
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="topform.email" class="input-item" type="text" placeholder="">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            聯絡人姓名
          </view>
          <view class="form-r">
            <input v-model="topform.truename" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            員工編號
          </view>
          <view class="form-r">
            <input v-model="topform.personal_sn" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            所屬市場
          </view>
          <view class="form-r">
            <picker @change="typeChange" :value="typeindex" :range="options.cn_type">
              <view class="picker">
                <view class="uni-input">{{ topform.market }}</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            所屬公司
          </view>
          <view class="form-r">
            <picker @change="companyChange" :value="companyindex" range-key="branchname" :range="company">
              <view class="picker">
                <view class="uni-input">{{ getBranchnameById(topform.branch_id) }}</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            所屬部門
          </view>
          <view class="form-r">
            <picker @change="departmentChange" :value="departmentindex" :range="department"
                    range-key="departmentname">
              <view class="picker">
                <view class="uni-input">{{ getDepartmentnameById(topform.department_id) }}</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="form" style="border-bottom: none;">
          <view class="form-l">
            權限
          </view>
          <view class="form-r">
            <view class="picker" @click="leftClick('/pages/mine/setting/person/rule')">
              <view class="uni-input">請選擇</view>
              <u-icon size="28rpx" name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view style="margin-top:16rpx ;background-color: #fff;">
        <!-- 超级管理员 -->
        <view v-if="index==0" style="padding-bottom: 143rpx;">
          <!-- 			<view class="form">
            <view class="form-l">
              選擇地址
            </view>
            <view class="form-r">
              <picker @change="bindPickerChange" :value="index" :range="array">
                <view class="picker">
                  <view class="uni-input">{{array[index]}}</view>
                  <u-icon size="28rpx" name="arrow-right"></u-icon>
                </view>
              </picker>
            </view>
          </view> -->
          <view class="form">
            <view class="form-l">
              報價單審批
            </view>
            <view class="form-r">
              <picker @change="baojiachange" :value="baojiaindex" :range="kuabumen">
                <view class="picker">
                  <view class="uni-input">{{ kuabumen[baojiaindex] }}</view>
                  <u-icon size="28rpx" name="arrow-right"></u-icon>
                </view>
              </picker>
            </view>
          </view>
          <view class="form">
            <view class="form-l">
              訂單指定審批
            </view>
            <view class="form-r">
              <picker @change="dindanchange" :value="dindanindex" :range="kuabumen">
                <view class="picker">
                  <view class="uni-input">{{ kuabumen[dindanindex] }}</view>
                  <u-icon size="28rpx" name="arrow-right"></u-icon>
                </view>
              </picker>
            </view>
          </view>
          <view class="form">
            <view class="form-l">
              跨部門管理
            </view>
            <view class="form-r" @click="leftClick('/pages/mine/setting/person/Order/department')">
              <view class="picker">
                <!-- <view class="uni-input">{{array[index]}}</view> -->
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <!-- 下单员 -->
        <view v-if="index==1" style="padding-bottom: 143rpx;">
          <!-- 		<view class="form">
            <view class="form-l">
              選擇地址
            </view>
            <view class="form-r">
              <picker @change="bindPickerChange" :value="index" :range="array">
                <view class="picker">
                  <view class="uni-input">{{array[index]}}</view>
                  <u-icon size="28rpx" name="arrow-right"></u-icon>
                </view>
              </picker>
            </view>
          </view> -->
          <view class="form">
            <view class="form-l">
              報價單審批
            </view>
            <view class="form-r">
              <picker @change="baojiachange" :value="baojiaindex" :range="kuabumen">
                <view class="picker">
                  <view class="uni-input">{{ kuabumen[baojiaindex] }}</view>
                  <u-icon size="28rpx" name="arrow-right"></u-icon>
                </view>
              </picker>
            </view>
          </view>
          <view class="form">
            <view class="form-l">
              訂單指定審批
            </view>
            <view class="form-r">
              <picker @change="dindanchange" :value="dindanindex" :range="kuabumen">
                <view class="picker">
                  <view class="uni-input">{{ kuabumen[dindanindex] }}</view>
                  <u-icon size="28rpx" name="arrow-right"></u-icon>
                </view>
              </picker>
            </view>
          </view>
          <view class="form">
            <view class="form-l">
              跨部門打單
            </view>
            <view class="form-r">
              <!-- <picker @change="bindPickerChange" :value="index" :range="array"> -->
              <view class="picker" @click="leftClick('/pages/mine/setting/person/Order/department')">
                <view class="uni-input">请选择</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
              <!-- </picker> -->
            </view>
          </view>
          <view
              style="padding:32rpx 32rpx;padding-bottom:0;font-size: 20rpx;font-family: PingFang SC;font-weight: 500;color: #999999;">
            註：若同時設置單筆限制金額和超出需審批金額，則單筆限制金額要大於超出需審批金額。
          </view>
          <view class="form">
            <view class="form-l">
              單筆限制最高金額
            </view>
            <view class="form-r">
              <input v-model="topform.limit_amount" class="input-item" type="number">
            </view>
          </view>
          <view class="form">
            <view class="form-l">
              單筆限制最低金額
            </view>
            <view class="form-r">
              <input v-model="topform.limit_min_amount" class="input-item" type="number">
            </view>
          </view>
          <view class="form">
            <view class="form-l">
              月限制金額
            </view>
            <view class="form-r">
              <view class="picker" @click="leftClick('/pages/mine/setting/person/Order/astrict')">
                <view class="uni-input">請選擇</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
          <view class="form">
            <view class="form-l">
              開啟金額累計
            </view>
            <view class="form-r">
              <view class="picker">
                <u-switch activeColor="#645AED" v-model="topform.accumulative_type"
                          @change="change"></u-switch>
              </view>
            </view>
          </view>
        </view>

        <!-- 检查员 -->
        <view v-if="index==2" class="">
          <view class="form">
            <view class="form-l">
              跨部門檢查訂單
            </view>
            <view class="form-r" @click="leftClick('/pages/mine/setting/person/Order/department')">
              <!-- <picker @change="bindPickerChange" :value="index" :range="array"> -->
              <view class="picker">
                <view class="uni-input">请选择</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
              <!-- </picker> -->
            </view>
          </view>
        </view>
        <!-- 财务员 -->
        <view v-if="index==3" class="">
          <view class="form">
            <view class="form-l">
              跨部門管理
            </view>
            <view class="form-r">
              <!-- <picker @change="bindPickerChange" :value="index" :range="array"> -->
              <view class="picker" @click="leftClick('/pages/mine/setting/person/Order/department')">
                <view class="uni-input">请选择</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
              <!-- </picker> -->
            </view>
          </view>
        </view>
        <!-- 资源中心 -->
        <view v-if="index==4" class="">
          <view class="form">
            <view class="form-l">
              月限制金額
            </view>
            <view class="form-r">
              <!-- <picker @change="bindPickerChange" :value="index" :range="array"> -->
              <view class="picker" @click="leftClick('/pages/mine/setting/person/Order/astrict')">
                <view class="uni-input">請選擇</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
              <!-- </picker> -->
            </view>
          </view>
          <view class="form">
            <view class="form-l">
              開啟金額累計
            </view>
            <view class="form-r">
              <view class="picker">
                <u-switch activeColor="#645AED" v-model="topform.accumulative_type"
                          @change="change"></u-switch>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="btn" @click="addsub">
      添加用户
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import {
  getedituser,
  getuserdepartment,
  getdepartment_list,
  getaddress,
  deluser,
  getusercharacter,
  adduser
} from "@/network/api/setting.js"

export default {
  data() {
    return {
      kuabumen: ['否', '是'],
      powers: [],
      departmentindex: 0,
      companyindex: 0,
      typeindex: 0,
      company: [], //所属公司，
      department: [], //部门
      options: {
        cn_regions: [
          "香港",
          "澳門"
        ],
        cn_type: [
          "博彩業",
          "工業",
          "服務業",
          "郵電",
          "通信",
          "社區服務",
          "批發",
          "零售業",
          "慈善機構"
        ],
      },
      array: [],
      index: 0,
      baojiaindex: 0,
      dindanindex: 0,
      value: false,
      value1: false,
      topform: {
        personal_sn: '',
        character_id: '',
        user_id: '',
        username: '',
        password: '',
        email: '',
        truename: '',
        market: '',
        branch_id: '',
        department_id: '',
        powers: [],
        approval_amount: '',
        limit_amount: '',
        limit_min_amount: '',
        quote_status: 0,
        order_status: 0,
        accumulative_type: 0,
        monthly_amount: {
          January: '',
          February: '',
          March: '',
          April: '',
          May: '',
          June: '',
          July: '',
          August: '',
          September: '',
          October: '',
          November: '',
          December: '',
        }
      }
    }
  },
  computed: {
    ...mapState({
      userinfo: state => state.user.userinfo,
    })
  },
  onShow() {
    this.getcomany(),
        this.getdepartment(),
        this.getcharacter()
  },
  methods: {
    change(e) {
      console.log(e);
    },
    async addsub() {

      if (!this.topform.character_id) {
        return uni.showToast({
          title: '選擇等級不能为空',
          icon: 'none'
        })
      }
      if (!this.topform.username) {
        return uni.showToast({
          title: '登錄名不能为空',
          icon: 'none'
        })
      }
      if (!this.topform.password) {
        return uni.showToast({
          title: '密碼不能为空',
          icon: 'none'
        })
      }
      if (!this.topform.email) {
        return uni.showToast({
          title: '郵箱不能为空',
          icon: 'none'
        })
      }
      let jurisdiction = uni.getStorageSync('jurisdiction')
      let powers = uni.getStorageSync('powers')
      let monthly_amount = uni.getStorageSync('monthly_amount')
      this.topform.powers = powers
      this.topform.monthly_amount = monthly_amount || {
        January: '',
        February: '',
        March: '',
        April: '',
        May: '',
        June: '',
        July: '',
        August: '',
        September: '',
        October: '',
        November: '',
        December: '',
      }
      this.topform.jurisdiction = jurisdiction
      console.log(this.topform);
      //提交中，请稍后
      uni.showLoading({
        title: '提交中，请稍后..',
      })
      const res = await adduser(this.topform)
      uni.hideLoading()
      if (res.data.code == 1) {
        uni.showToast({
          title: '添加成功',
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1000);
      } else {
        uni.showToast({
          title: res.data.msg,
        })
      }
    },
    async getdepartment() {
      let data = {
        company_id: this.userinfo.company_id,
        branch_id: '',
      }
      const res = await getdepartment_list(data)
      this.department = res.data.department
    },
    async getcomany() {
      let data = {
        company_id: this.userinfo.company_id,
      }
      const res = await getuserdepartment(data)
      this.company = res.data.branch
    },
    async getcharacter() {
      const res = await getusercharacter()
      this.array = res.data.character
    },
    baojiachange(e) {
      this.baojiaindex = e.detail.value
      console.log(this.baojiaindex);
      this.topform.quote_status = this.baojiaindex
    },
    dindanchange(e) {

      this.dindanindex = e.detail.value
      this.topform.order_status = this.dindanindex
    },
    bindPickerChange(e) {
      uni.removeStorageSync('jurisdiction');
      uni.removeStorageSync('powers');
      uni.removeStorageSync('monthly_amount');
      this.topform = {
        personal_sn: '',
        character_id: '',
        user_id: '',
        username: '',
        password: '',
        email: '',
        truename: '',
        market: '',
        branch_id: '',
        department_id: '',
        powers: [],
        approval_amount: '',
        limit_amount: '',
        limit_min_amount: '',
        quote_status: 0,
        order_status: 0,
        accumulative_type: 0,
        monthly_amount: {
          January: '',
          February: '',
          March: '',
          April: '',
          May: '',
          June: '',
          July: '',
          August: '',
          September: '',
          October: '',
          November: '',
          December: '',
        }
      }
      this.index = e.detail.value
      console.log(this.index);
      this.topform.character_id = this.array[this.index].character_id
      console.log(this.topform.character_id);
    },
    departmentChange(e) {
      this.departmentindex = e.detail.value
      this.topform.department_id = this.department[this.departmentindex].department_id
    },
    typeChange(e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.typeindex = e.detail.value
      this.topform.market = this.options.cn_type[this.typeindex]
    },
    companyChange(e) {
      this.companyindex = e.detail.value
      this.topform.branch_id = this.company[this.companyindex].branch_id
    },
    leftClick(url) {
      console.log('rightClick');
      uni.navigateTo({
        url: url
      })
    },
    getcharacterByid(id) {
      for (let i = 0; i < this.array.length; i++) {
        if (this.array[i].character_id === id) {
          return this.array[i].charactername;
        }
      }
      return null;
    },
    getBranchnameById(id) {
      for (let i = 0; i < this.company.length; i++) {
        if (this.company[i].branch_id === id) {
          return this.company[i].branchname;
        }
      }
      return null; // Return null if no matching branch_id is found
    },
    getDepartmentnameById(id) {
      for (let i = 0; i < this.department.length; i++) {
        if (this.department[i].department_id === id) {
          return this.department[i].departmentname;
        }
      }
      return null; // Return null if no matching department_id is found
    },
    isAccumulativeTypeOne(item) {
      if (item == 0) {
        return false;
      } else if (item == 1) {
        return true;
      } else {
        // 处理其他可能的情况
        return false;
      }
    }

  }
}
</script>

<style lang="scss">
.content {
  background-color: #F5F6F9;
  width: 100%;
  min-height: 100vh;
  position: relative;

  .main {
    // background-color: #fff;

    .form {
      margin: 0 32rpx;
      padding: 32rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #DEDEDE;

      .form-l {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }

      .form-r {
        display: flex;
        align-items: center;

        // flex-direction: row-reverse;
        // margin-left: 48rpx;
        // flex: 1;
        // float: right;
        .picker {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .uni-input {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #BEBEBE;
          }
        }

      }
    }

    .form:last-child {
      border-bottom: none;
    }
  }

  .open {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-top: 22rpx;
    background-color: #fff;
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn {
    position: absolute;
    bottom: 15rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 80rpx;
    color: #FFFFFF;
    width: 686rpx;
    height: 80rpx;
    text-align: center;
    background: #645AED;
    border-radius: 30rpx;
  }
}
</style>
